// 封装改变模块展开或者闭合的方法
// 参数1: 你要改变的模块标签的id值(注:不加#)
function change(tg) {

	//  下面两行代码  让 关闭所有的div 箭头恢复初始状态
	$("#" + tg).parent().children("div").slideUp(700);
	$("#" + tg).parent().children().children(".derection").css("background-image", "url(../img/down.png)");
	// 判断当前div的兄弟div是否是隐藏的
	if($("#" + tg).next().css("display") == "none") {
		// 改变箭头图片
		$("#" + tg).children(".derection").css("background-image", "url(../img/up.png)");
	} else {
		// 改变箭头图片
		$("#" + tg).children(".derection").css("background-image", "url(../img/down.png)");
	}
	if(!$("#" + tg).next(".drop_content").is(":animated")) {
		$("#" + tg).next(".drop_content").slideToggle(700);
	}
}
// 利用事件委托, 给#main_list绑定事件
document.querySelector("#food_right_drop").addEventListener("click", function(e) {
	var e = e || window.event;
	var _id;
	// 判断当前触发点击事件的是a标签的话
	if(e.target.tagName == "A") {
		// 找a标签父级标签div的id
		_id = e.target.parentNode.id;
	} else {
		_id = e.target.id;
	}
	// 调用展开/关闭模块的方法, 传入那个div的id值
	change(_id);
}, false);

//点击右方左方改变背景
var rightArr = document.querySelectorAll(".selected");
var leftArr = document.querySelectorAll(".food_none");
var food_0 = document.getElementById("food_0");
console.log(leftArr);
for(var i = 0; i < rightArr.length; i++) {
	rightArr[i].ind = i;
	rightArr[i].onclick = function() {
		food_0.style.display = "none";
		for(var i = 0; i < leftArr.length; i++) {
			leftArr[i].style.display = "none";
		}
		leftArr[this.ind].style.display = "block";
	}
}